 /*
 * @name: 设置商品组
 * @Author: along
 * @Date: 2019-07-15
 * @Last Modified by: along
 * @Last Modified time: 2020-07-15
 */
<template>
    <el-dialog
        title="设置商品组"
        :visible.sync="dialogGroup"
        width="788px"
        :close-on-click-modal="false"
        class="shopGroup"
    >
        <div class="zd-list">
            <el-checkbox-group
                v-model="checkGroup"
            >
                <el-checkbox
                    v-for="(item,i) in dataList"
                    :label="item.id"
                    :key="i"
                    @mouseenter.native="fnEnterCheck(item, i)"
                    @mouseleave.native="fnLeaveCheck(item)"
                >
                    <div class="zd-list-item">
                        {{ item.title | setNumber(10) }}
                        <span
                            v-if="item.length"
                            class="zd-list-item-length"
                        >
                            ({{ item.length }})
                        </span>
                        <i
                            v-if="item.children.length > 0"
                            class="el-icon-caret-bottom"
                            :style="{ transform: item.flag ? `rotate(180deg)` : '' }"
                        />
                        <div
                            v-if="i == now_index && item.flag"
                            class="zd-list-hover"
                        >
                            <el-checkbox-group
                                v-model="checkAll"
                            >
                                <el-checkbox
                                    v-for="(option,key) in item.children"
                                    :label="option.id"
                                    :key="key"
                                    @change="handGroupChange(item.children, item)"
                                >
                                    {{ option.title | setNumber(4) }}
                                </el-checkbox>
                            </el-checkbox-group>
                        </div>
                    </div>
                </el-checkbox>
            </el-checkbox-group>
        </div>
        <span
            slot="footer"
            class="dialog-footer"
        >
            <el-button
                @click="dialogGroup = false"
                size="small"
                :style="{width: '126px', height: '36px'}"
            >
                取 消
            </el-button>
            <el-button
                type="primary"
                size="small"
                :style="{width: '126px', height: '36px', marginLeft: '52px'}"
                @click="fnSaveGroup()"
            >
                保 存
            </el-button>
        </span>
    </el-dialog>
</template>

<script>
export default {
    name: 'ShopGroup',
    data () {
        return {
            now_index: -1,
            dialogGroup: false,//开关
            dataList: [],//商品组数据
            checkGroup: [],//商品组选中数据
            checkAll: [],//商品组分类选中数据
            type: '',//操作类型 add: 新增 edit: 编辑
            goods_no: '',//记录编辑时商品编号
            isNext: false,
        };
    },
    filters: {
        setNumber (val, count) {
            if(val.length > count) {
                return val.slice(0, count) + '...';
            } else {
                return val;
            }
        }
    },
    watch: {
        checkGroup (val) {
            console.log(this.checkGroup, 'checkGroup');
        },
        dialogGroup (val) {
            if(!val) {
                this.checkGroup = [];
                this.checkAll = [];
                this.isNext = false;
            }
        }
    },
    mounted () {
        this.initGroup();
    },
    methods: {
        /**
         * 获取当前类型及数据
         */
        getType (type, list) {
            this.type = type;

            if(type == 'add') {
                this.clearLength();
            }

            if(type == 'edit') {
                let group = list.data.list;

                this.goods_no = list.goods_no;
                group.forEach(element => {
                    if(element.indexOf('goc_') > -1){
                        this.checkGroup.push(element);
                    }
                    if(element.indexOf('goct_') > -1){
                        this.checkAll.push(element);
                    }
                });

                this.setLength(this.checkGroup, this.checkAll);

                console.log('商品组一共:' + this.checkGroup.length + '个', '商品组分类一共:' + this.checkAll.length + '个');
            }
        },

        /**
         * @description 监听是否为单个设置商品组
         */
        getNext (type) {
            this.isNext = type;
        },

        /**
         * 清空已选数量
         */
        clearLength () {
            this.dataList.forEach(option => {
                option.length = 0;
            });
        },

        /**
         * 获取商品组联动数据
         */
        initGroup () {
            this.$post('/student/shop_goods_cate%5Cget_list_linkage',{},resp=>{
                if (resp.code == 1) {
                    this.dataList = resp.data.list;
                } else if (resp.code == 0) {
                    this.$notify({
                        title: '警告',
                        message: resp.msg,
                        type: 'warning',
                        duration: 2000
                    });
                }
            });
        },

        /**
         * 选择商品组分类
         *      计算选择数量
         */
        handGroupChange (list, row) {
            let groupList = list.reduce((cur, next) => {
                cur.push(next.id);
                return cur;
            }, []);

            this.dataList.forEach(element => {
                let arr = element.children.reduce((cur,next) => {
                    cur.push(next.id);
                    return cur;
                },[]);

                if(this.checkAll.length > 0 && this.type == 'edit') {//仅编辑时会执行
                    let id = this.checkAll[this.checkAll.length - 1];//获取新增商品分类id

                    if(arr.indexOf(id) > -1 && this.checkGroup.indexOf(element.id) == -1) {
                        this.checkGroup.push(element.id);
                    } else {
                        // this.checkGroup.splice(this.checkGroup.indexOf(element.id), 1);
                    }
                }
            });

            let length = this.checkAll.filter(item => groupList.includes(item)).length;

            this.$set(row, 'length', length);

            console.log(this.checkAll, 'checkAll');
        },

        /**
         * 回填商品分类数量
         */
        setLength () {
            this.dataList.forEach(element => {
                let list = element.children.reduce((cur,next) => {
                    cur.push(next.id);
                    return cur;
                },[]);

                element.length = list.filter(item => this.checkAll.includes(item)).length;
            });
        },

        /**
         * 保存
         */
        fnSaveGroup () {
            if(this.type == 'add') {
                this.$emit('sendData', {
                    data: this.checkAll.concat(this.checkGroup),
                    type: 'add',
                    isNext: this.isNext
                });
            } else if (this.type == 'edit') {
                this.$emit('sendData', {
                    data: this.checkAll.concat(this.checkGroup),
                    type: 'edit',
                    goods_no: this.goods_no
                });
            } else {
                return false;
            }
        },

        /**
         * 鼠标滑过效果
         */
        fnEnterCheck (row, i) {
            if(row.children.length > 0) {
                this.$set(row, 'flag', true);
                this.now_index = i;
            } else {
                return false;
            }
        },

        fnLeaveCheck (row) {
            this.$set(row, 'flag', false);
            this.now_index = -1;
        },

        /**
         * 显示
         */
        show () {
            this.dialogGroup = true;
        },

        /**
         * 关闭
         */
        hide () {
            this.dialogGroup = false;
            this.checkGroup = this.checkAll = [];
        }
    }
};
</script>

<style lang="less" scoped>
.zd-list {
    position: relative;
    &-item-length {
        color: #ee4e59;
    }
    .el-icon-caret-bottom {
        color: #20A0FF;
        transition: all .2s;
    }
    &-hover {
        width: 200px;
        min-width: 200px;
        background: #ffffff;
        position: absolute;
        left: -24px;
        top: 24px;
        z-index: 1000;
        box-shadow:0px 0px 20px 0px rgba(0,0,0,0.16);
        display: flex;
        flex-wrap: wrap;
        box-sizing: border-box;
        padding: 12px;
        border-radius: 5px;
        // border: 1px red solid;
    }
}
.dialog-footer {
    width: 100%;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}
</style>

<style lang="less">
.shopGroup {
    .el-dialog__header {
        padding-top: 10px;
        box-shadow:0px 1px 0px 0px rgba(233,233,233,1);
        display: flex;
        align-items: center;
        background: #FAFAFA;
        margin-bottom: 25px;
        .el-dialog__title {
            font-weight: 500;
            color: #333;
            font-size: 14px;
        }
        .el-icon-close:before {
            color: rgb(194,194,194);
            font-size: 17px;
            font-weight: bold;
        }
        .el-dialog__headerbtn {
            top: 14px;
        }
    }
    .zd-list {
        width: 100%;
        .el-checkbox-group .el-checkbox {
            // width: calc(100% / 4);
            width: 180px;
            margin-right: 0px;
            padding-bottom: 8px;
            margin-bottom: 28px;
        }
        //.el-checkbox-group .el-checkbox:nth-child(4n) {
        //    // width: calc(100% / 4);
        //    width: 90px;
        //}
        &-hover .el-checkbox-group {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            .el-checkbox {
                width: calc((100% / 2) - 3px);
                margin-bottom: 16px;
                padding-bottom: 0px;
            }
        }
    }
    .el-dialog__body {
        padding: 24px 32px;
    }
}
</style>
